<style lang="scss" scoped>
::v-deep .el-form-item__content{
  .is-disabled{
    input,textarea{
      background: #FFF;
      color: var(--el-input-text-color,var(--el-text-color-regular)) !important;
      -webkit-text-fill-color: var(--el-input-text-color,var(--el-text-color-regular)) !important;
    }
  }
}
</style>

<template>
  <div class=" grid grid-cols-4 items-center">
    <el-input v-model="filterInfo.card" placeholder="车牌号" />
    <el-select v-model="filterInfo.cardtype"
      class="m-2" placeholder="车牌种类" >
      <el-option
        v-for="item in [
          { label:'所有车牌种类',value:0 },
          { label:'类型A',value:1 },
          { label:'类型B',value:2 },
          { label:'类型C',value:3 },
          { label:'类型D',value:4 },
        ]"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="filterInfo.cartype"
      class="m-2" placeholder="车辆种类" >
      <el-option
        v-for="item in [
          { label:'所有车辆种类',value:0 },
          { label:'类型A',value:1 },
          { label:'类型B',value:2 },
          { label:'类型C',value:3 },
          { label:'类型D',value:4 },
        ]"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select v-model="filterInfo.isopen"
      class="m-2" placeholder="是否启用" >
      <el-option
        v-for="item in [
          { label:'无论是否启动',value:0 },
          { label:'是',value:1 },
          { label:'否',value:2 }
        ]"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>

  <div class=" h-12 flex justify-end">
    <el-button type="warning" :icon="Plus"  @click="openEdit()" >添加</el-button>
    <el-button type="warning" :icon="Upload"   >导入</el-button>
    <el-button type="warning" :icon="Download" >导出</el-button>
  </div>

  <el-table 
    :data="baseinfo" 
    border
    style="width: 100%"
    height="calc(100vh - 235px)"
  >
    <el-table-column prop="card"      label="车牌号"   width="120" fixed="left"  />
    <el-table-column prop="cardtype"  label="车牌种类" width="100" />
    <el-table-column prop="func"      label="处置方式"  />
    <el-table-column prop="cartype"   label="车辆类别" width="100" />
    <el-table-column prop="isnonono"  label="是否中标" width="100" />

    <el-table-column label="是否启用" width="90">
      <template #default="{ row:{isopen} }">
        <el-switch
          :value="isopen"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="启"
          inactive-text="废"
        />
      </template>
    </el-table-column>
    <el-table-column label="黑名单" width="90">
      <template #default="{ row:{isblack} }">
        <el-switch
          :value="isblack"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="白"
          inactive-text="黑"
        />
      </template>
    </el-table-column>
    <el-table-column prop="createtime" label="创建时间" width="220" />
    <el-table-column label="操作" width="303" fixed="right">
      <template #default="{ row }">
        <el-button 
          @click="openEdit(row)"
          text bg type="warning" :icon="ChatLineRound">
          详情
        </el-button>
        <el-button 
          text bg type="info" :icon="Edit">
          编辑
        </el-button>
        <el-button text bg type="danger" :icon="Delete">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <el-pagination
    v-model:currentPage="pageInfo.page"
    v-model:page-size="pageInfo.size"
    :page-sizes="[5,15,20,50]"
    background
    class=" h-12 transform translate-y-3"
    :layout="`total, sizes${total>pageInfo.size?', prev, pager, next, jumper':''} `"
    :total="total"
    @size-change="getData"
    @current-change="getData"
  />


  <el-dialog 
    width="600px" 
    draggable 
    v-model="showDetail" 
    :title="`车辆${carinfo.id? '编辑':'添加'}`"
  >
    <el-scrollbar height="400px">
    <el-form
      :disabled="carinfo.id"
      label-width="120px"
      :model="carinfo"
      ref="ruleFormRef"
      :rules="rules"
    >
      <el-form-item label="车牌号" prop="card">
        <el-input v-model="carinfo.card" placeholder="填写车牌号" />
      </el-form-item>
      <el-form-item label="车牌种类" prop="cardtype">
        <el-select v-model="carinfo.cardtype" placeholder="选择车牌种类" >
          <el-option
            v-for="item in [
              { label:'类型A',value:1 },
              { label:'类型B',value:2 },
              { label:'类型C',value:3 },
              { label:'类型D',value:4 },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="车主身份证">
        <el-input v-model="carinfo.ucard" placeholder="填写车主身份证" />
      </el-form-item>
      <el-form-item label="车主姓名">
        <el-input v-model="carinfo.uname" placeholder="填写车主姓名" />
      </el-form-item>
      <el-form-item label="处置方式" prop="func">
        <el-input
          v-model="carinfo.func"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          maxlength="300"
          show-word-limit
          placeholder="填写处置方式"
        />
      </el-form-item>
      <el-form-item label="车辆类别">
        <el-select v-model="carinfo.cartype" placeholder="选择车辆种类" >
          <el-option
            v-for="item in [
              { label:'类型A',value:1 },
              { label:'类型B',value:2 },
              { label:'类型C',value:3 },
              { label:'类型D',value:4 },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="isopen">
        <el-radio-group v-model="carinfo.isopen">
          <el-radio :label="false" >未启用</el-radio>
          <el-radio :label="true"  >启用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="黑白名单" prop="isblack">
        <el-radio-group v-model="carinfo.isblack">
          <el-radio :label="false" >黑名单</el-radio>
          <el-radio :label="true"  >白名单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="列控开始时间" prop="starttime">
        <el-date-picker
          v-model="carinfo.starttime"
          type="datetime"
          placeholder="填写列控开始时间"
        />
      </el-form-item>
      <el-form-item label="列控结束时间" prop="endtime">
        <el-date-picker
          v-model="carinfo.endtime"
          type="datetime"
          placeholder="填写列控结束时间"
        />
      </el-form-item>
    </el-form>
    </el-scrollbar>
    <template #footer v-if="!carinfo.id">
      <span class="dialog-footer">
        <el-button @click="showDetail = false">关闭</el-button>
        <el-button type="primary" @click="saveInfo">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup >
import { reactive, toRefs, ref } from '@vue/reactivity'
import { computed, onBeforeMount, watch } from '@vue/runtime-core'
import { getCarList,loadApi } from 'api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { Edit,Delete,ChatLineRound,Plus,Upload,Download } from '@element-plus/icons-vue'
import { cloneDeep, debounce } from 'lodash'
const data = reactive({
  baseinfo:[],
  filterInfo:{
    card:'',
    cardtype:0,
    cartype:0,
    isopen:0,
  },
  pageInfo:{
    size:15,
    page:1,
  },
  total:0,
  showDetail:false,
  carinfo:{

  }
})

const store = useStore()

const getData = async () => {
  const { total,baseinfo } = await getCarList(data.pageInfo)
  Object.assign(data,{baseinfo,total})
}

const debounce_get = debounce(()=>{
  data.pageInfo.size = 1
  getData()
},500)

watch(()=>data.filterInfo,()=>{
  debounce_get()
},{deep:true})

onBeforeMount(()=>{
  getData()
})

const openEdit = (carinfo = {}) => {
  console.log({carinfo})
  Object.assign(data,{carinfo,showDetail:true})
}

const ruleFormRef = ref()
const saveInfo = async () => {
  await ruleFormRef.value.validate()
  await ElMessageBox.confirm('确认提交？')
  await loadApi()
  data.showDetail = false
  ElMessage.success('添加成功')
}

const { baseinfo, pageInfo, total, filterInfo, showDetail, carinfo } = { ...toRefs(data) }



const rules = {
  card:     [{ required: true, message:'请填写车牌号'      , trigger: 'blur' }],
  cardtype: [{ required: true, message:'请选择号牌种类'    , trigger: 'blur' }],
  func:     [{ required: true, message:'请填写处置方式'    , trigger: 'blur' }],
  isopen:   [{ required: true, message:'请选择是否启用'    , trigger: 'blur' }],
  isblack:  [{ required: true, message:'请选择是否黑名单'  , trigger: 'blur' }],
  starttime:[{ required: true, message:'请选择列控开始时间', trigger: 'blur' }],
  endtime:  [{ required: true, message:'请选择列控结束时间', trigger: 'blur' }]
} 
</script>